<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar
			title="意见反馈"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<!-- 主体内容 -->
		<view class="body_box">
			<view class="content_box">
				<view class="title_box">
					<view class="mian_title">感谢您提交建议</view>
					<view class="sub_title">(您的每一次鞭策，都是我们前进的动力~)</view>
					<u-line></u-line>
				</view>
				<view class="type_list">
					<!-- <u-button
						shape="circle"
						size="mini"
						:type="item.check ? 'warning' : 'info'"
						v-for="(item, index) in list"
						:key="index"
						@click="change(item)"
						style="margin: 0 10rpx"
					>
						{{ item.dictLabel }}
					</u-button> -->
					<view
						:class="item.check ? 'select_btn' : 'btn'"
						v-for="(item, index) in list"
						:key="index"
						@click="change(item)"
					>
						{{ item.dictLabel }}
					</view>
				</view>

				<view class="feedback_box">
					<u-input
						v-model="form.feedbackDesc"
						type="textarea"
						:border="true"
						:height="200"
						:auto-height="autoHeight"
						:clearable="false"
						placeholder="您也可以在这里写下您的建议，厨师将根据您的喜好不断改进~"
					/>
				</view>

				<view class="submit_btn">
					<u-button shape="circle" type="warning" @click="onsubmit">提交</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { userFeedback } from '@/api/common'

export default {
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			list: [],
			form: {
				feedbackDesc: ''
			}
		}
	},
	onLoad() {
		this.getDict()
	},
	methods: {
		async getDict() {
			const { data } = await this.dictApi('feedback_item')
			this.list = data
			this.$set(data[0], 'check', true)
		},
		change(row) {
			this.$set(row, 'check', !row.check)
		},
		async onsubmit() {
			if (!this.form.feedbackDesc) {
				this.showToast('请输入意见内容')
			}
			const feedbackItem = this.list.filter((item) => item.check).map((i) => i.dictSort)
			await userFeedback({ ...this.form, feedbackItem: feedbackItem.join() })
			this.showToast('反馈成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style lang="less" scoped>
.body_box {
	padding: 26rpx;

	.content_box {
		background-color: #fff;
		// height: 500rpx;
		border-radius: 20rpx;
		padding: 28rpx 22rpx;

		.title_box {
			.mian_title {
				font-size: 32rpx;
				color: #101010;
			}

			.sub_title {
				font-size: 26rpx;
				color: #888;
				margin-top: 10rpx;
				margin-bottom: 26rpx;
			}
		}

		.type_list {
			display: flex;
			margin-top: 26rpx;

			.btn {
				font-size: 24rpx;
				text-align: center;
				color: #101010;
				background-color: #eee;
				border-radius: 40rpx;
				margin-right: 10rpx;
				padding: 6rpx 25rpx;
			}

			.select_btn {
				font-size: 24rpx;
				text-align: center;
				border-radius: 40rpx;
				margin-right: 10rpx;
				padding: 6rpx 25rpx;
				color: #fff;
				background-color: #ff9900;
			}
		}

		.feedback_box {
			margin-top: 40rpx;
		}

		.submit_btn {
			margin-top: 60rpx;
			margin-bottom: 60rpx;
		}
	}
}
</style>
